<template>
	<view class="bookshelf">
		<view class="top">
			<view class="readtime">
				<text class="size1" @click="addVuex">45</text>
				<text class="size2">分钟</text>
				<text class="size3">今日已读</text>
			</view>
			<view class="iconGroup" v-if="!ifchoose">
				<!-- <image class="qd" src="../../static/icon_qd.png" mode=""></image> -->
				<image @click="tosearch" class="search" src="../../static/icon_search.png" mode=""></image>
				<image class="ls" src="../../static/icon_ls.png" mode="" @click="to_looked"></image>
			</view>
			<view class="ok" v-else="!ifchoose" @click="wancheng">
				完成
			</view>
		</view>
		<view class="tuijian">
			<image src="../../static/icon_tj.png" mode=""></image>
			<text>再见那个年少轻狂的时代，再见我的烦恼不再孤单，在无尽的黑夜，所有都快要毁灭</text>
		</view>
		<view class="listArea clearfix">
			<view class="bookmain" v-for="(item, index) in sjList" :data-id="item.book_id" :data-index="index" :data-show="ifchoose"
			 :key="item.book_id" @longtap="langtapFn" @click="tapBook">
				<view class="imgArea" style="background: url(../../static/img_yy.png);">
					<view class="choose" v-if="ifchoose">
						<image v-if="!item.checkVal" src="../../static/selet_del.png" mode=""></image>
						<image v-if="item.checkVal" src="../../static/selet_s.png" mode=""></image>
					</view>
					<image :src="item.img" mode=""></image>
					<!-- <view class="type">
						{{item.labelist[0]}}
					</view> -->
				</view>
				<text class="name">{{item.book_name}}</text>
				<text class="status" v-if="index == 0">继续阅读</text>
			</view>
			<view class="bookmain">
				<view class="imgArea" @click="tojingxuan">
					<image src="../../static/btn_add.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="footer" v-if="ifchoose">
			<button class="allChoose" @click="allcheck">全选</button>
			<button class="delect" @click="delectBook">点此删除({{delectCount}})</button>
		</view>
	</view>
</template>

<script>
	import key from '@/common/key.js';
	import utils from '@/common/utils.js';
	export default {
		data() {
			return {
				ifchoose: false,
				sjList: [],
				delectCount: 0,
				bid: []
			}
		},
		created() {
			// this.onloadFn();
		},
		onShow() {
			this.onloadFn2();
		},
		methods: {
			onloadFn2() {
				let value = uni.getStorageSync('addshujiaData');
				console.log(value);
				if (value.length == 0) {
					this.sjList = [];
				} else {
					this.sjList = value;
				}
			},
			onloadFn() {
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"sex": '1',
					"user_id": '0'
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a3/bookrack`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"sex": '1',
						"user_id": '0',
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							console.log(res);
							let data = res.data.data;
							data.forEach((val, index, arr) => {
								arr[index].bookimg = utils.imgMd5(arr[index].bookimg);
								arr[index].checkVal = false;
							})
							this.sjList = data;
						}
					}
				})
			},
			langtapFn(e) {
				if (!this.ifchoose) {
					this.ifchoose = true
				}
			},
			tojingxuan(){
				uni.switchTab({
					url: '/pages/JingXuan/JingXuan'
				})
			},
			to_looked(){
				uni.navigateTo({
					url: '/pages/childPages/looked/looked'
				})
			},
			tosearch(){
				uni.navigateTo({
					url: '/pages/childPages/search/search/search'
				})
			},
			tapBook(e) {
				console.log(e)
				var ifshow = e.currentTarget.dataset.show;
				var index = e.currentTarget.dataset.index;
				var bid = e.currentTarget.dataset.id;
				var sourceId = this.sjList[index].book_source_id;
				var num = this.sjList[index].num;
				if (ifshow == 'true') {
					var tj = this.sjList[index].checkVal;
					if (tj) {
						this.delectCount -= 1;
						console.log(this.bid, bid)
						for (var i = 0; i < this.bid.length; i++) {
							if (bid == this.bid[i]) {
								this.bid.splice(i, 1);
							}
						}
						console.log(this.bid)
					} else {
						this.delectCount += 1;
						this.bid.push(bid)
						console.log(this.bid)
					}
					this.sjList[index].checkVal = !this.sjList[index].checkVal;
				} else {
					console.log(this.sjList[index]);
					let allData = {
						book_id: bid,
						book_source_id:sourceId,
						num:num,
						img:this.sjList[index].img,
						author:this.sjList[index].author,
						book_name:this.sjList[index].book_name,
						desc: this.sjList[index].desc
					}
					// 转成json 字符串
					let all = JSON.stringify(allData)
					console.log(all)
					// base64 encode
					let mode64 = utils.encode(all)
					// url encode
					let modeEncode = encodeURIComponent(mode64)
					uni.navigateTo({
						url: `/pages/childPages/read/read?allData=${modeEncode}`
					})
				}
			},
			allcheck() {
				this.sjList.forEach((val, index, arr) => {
					val.checkVal = true;
				})
				this.delectCount = this.sjList.length;
			},
			wancheng() {
				this.sjList.forEach((val, index, arr) => {
					val.checkVal = false;
				})
				this.ifchoose = false;
				this.delectCount = 0;
			},
			delectBook() {
				var value = uni.getStorageSync('addshujiaData');
				for (var i = 0; i < this.bid.length; i++) {
					value.forEach((val, index, arr) => {
						if (val.book_id == this.bid[i]) {
							arr.splice(index, 1);
						}
					})
				}
				this.sjList = value;
				uni.removeStorageSync('addshujiaData')
				uni.setStorageSync('addshujiaData', value);
				uni.showToast({
					title: "删除成功"
				})
				// var book_id = this.bid.join(',');
				// const data = {
				// 	"app": "YLXS_Android",
				// 	"channel": "H5",
				// 	"device_id": 0,
				// 	"t_channel": "YLXS_Android",
				// 	"version": "1.0.0",
				// 	"book_id": book_id,
				// 	"user_id": '0'
				// }
				// 			
				// let sign = utils.sortObj(data)
				// uni.request({
				// 	url: `${key.URL}a3/bookrack/del`,
				// 	method: 'POST',
				// 	data: {
				// 		"app": "YLXS_Android",
				// 		"channel": "H5",
				// 		"device_id": 0,
				// 		"t_channel": "YLXS_Android",
				// 		"version": "1.0.0",
				// 		"book_id": book_id,
				// 		"user_id": '0',
				// 		"sign": sign,
				// 	},
				// 	dataType: 'json',
				// 	header: {
				// 		"Content-Type": "application/x-www-form-urlencoded"
				// 	},
				// 	success: (res) => {
				// 		if (res.data.status == 200) {
				// 			console.log(res);
				// 			var bidArr = book_id.split(',');
				// 			for(var i = 0; i<bidArr.length; i++){
				// 				this.sjList.forEach((val, index, arr) => {
				// 					if(val.bid == bidArr[i]){
				// 						this.sjList.splice(index, 1); 
				// 					}
				// 				})
				// 			}
				// 			uni.showToast({
				// 				title: "删除成功"
				// 			})
				// 		}
				// 	}
				// })
			},
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		background: #fff;
		height: 100upx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 123;
	}

	.top .readtime {
		float: left;
		margin-left: 34upx;
	}

	.top .readtime text {
		float: left;
		color: #4E4F5E;
		margin-left: 6upx;
	}

	.top .readtime text.size1 {
		font-size: 60upx;
		font-weight: 500;
		margin-top: 16upx;
		line-height: 84rpx;
	}

	.top .readtime text.size2 {
		font-size: 36upx;
		margin-top: 40upx;
		line-height: 50rpx;
	}

	.top .readtime text.size3 {
		font-size: 22upx;
		margin-top: 54upx;
		line-height: 32rpx;
	}

	.top .iconGroup {
		float: right;
		margin-right: 40upx;
	}

	.top .iconGroup image {
		float: left;
		width: 40upx;
		height: 40upx;
		margin-top: 40upx;
	}

	.top .iconGroup image.qd {
		width: 60upx;
		height: 60upx;
		margin-top: 20upx;
	}

	.top .iconGroup image.ls {
		margin-left: 40upx;
	}

	.top .iconGroup image.search {
		margin-left: 40upx;
	}

	.top .ok {
		font-size: 36upx;
		color: #4B4C5D;
		float: right;
		margin-right: 40upx;
		margin-top: 36upx;
	}

	.tuijian {
		width: 670upx;
		height: 100upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 7px 0px rgba(90, 91, 119, 0.11);
		border-radius: 16upx;
		margin: 0 auto;
		margin-top: 140upx;
	}

	.tuijian image {
		float: left;
		width: 40upx;
		height: 40upx;
		margin-left: 20upx;
		margin-top: 30upx;
	}

	.tuijian text {
		float: left;
		margin-left: 8upx;
		font-size: 30upx;
		color: #818295;
		line-height: 44upx;
		margin-top: 30upx;
		width: 580upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.listArea {
		width: 732upx;
		height: auto;
		margin: 0 auto;
		margin-top: 12upx;
	}

	.listArea .bookmain {
		width: 200upx;
		height: 320upx;
		float: left;
		margin: 0 22upx;
		margin-top: 44upx;
	}

	.bookmain .imgArea {
		width: 200upx;
		height: 250upx;
		background-size: 100% 100%;
		position: relative;
	}

	.bookmain .imgArea image {
		float: left;
		width: 180upx;
		height: 240upx;
		margin-top: -16upx;
		margin-left: 10upx;
		background: #0081FF;
	}

	.bookmain .imgArea .type {
		width: 56upx;
		height: 28upx;
		background: rgba(0, 0, 0, 0.68);
		position: absolute;
		left: 22upx;
		bottom: 42upx;
		font-size: 18upx;
		color: #fff;
		text-align: center;
		line-height: 28upx;
	}

	.bookmain text.name {
		font-size: 28upx;
		color: #4E4F5E;
		display: block;
		width: 180upx;
		margin: 0 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bookmain text.status {
		font-size: 24upx;
		color: #EE9067;
		float: left;
		margin-left: 10upx;
	}

	.choose {
		position: absolute;
		left: 12upx;
		width: 30upx;
		height: 30upx;
		top: 12upx;
		z-index: 12;
	}

	.bookmain .choose image {
		display: block;
		background: none;
		width: 30upx;
		height: 30upx;
	}

	.footer {
		width: 100%;
		height: 108upx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
	}

	.footer button {
		border: none;
		font-size: 30upx;
		float: left;
		color: #fff;
		line-height: 88upx;
	}

	.footer button.allChoose {
		width: 270upx;
		height: 88upx;
		margin: 10upx 30upx;
		background: #EE9067;
		border-radius: 8upx;
	}

	.footer button.delect {
		width: 390upx;
		height: 88upx;
		background: rgba(79, 80, 206, 1);
		border-radius: 8upx;
		margin: 10upx 0;
	}
</style>
